<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素伸长收缩基准长度的细节</title>
    <style>
      /* 
        弹性项目伸: 雨露均沾
        公式:
        每个弹性项目的增量(单份) = 弹性容器中剩余的空间量 ÷ 弹性项目flex-grow值的和
        实际增量 = 每个弹性项目的增量(单份) * flex-grow的值

        ------------------------------------------------------------------------------

        弹性项目缩: 
        item1     200px
        item2     300px
        item3     200px

        在默认缩小情况下,即flex-shrink: 1
        
        分母:   200 * 1 + 300 * 1 + 200 * 1 = 700

        item1的收缩比: 200 * 1 / 700 = 0.2857142857142857
        item2的收缩比: 300 * 1 / 700 = 0.4285714285714286
        item3的收缩比: 200 * 1 / 700 = 0.2857142857142857

        当弹性容器空间减为300px时
        item1       300 * 0.2857142857142857 = 85.71428571428571
        item2       300 * 0.4285714285714286 = 128.5714285714286
        item3       300 * 0.2857142857142857 = 85.71428571428571
      */
      .container {
        display: flex;
        width: 1000px;
        height: 800px;
        background-color: #ccc;
      }

      .item1 {
        width: 200px;
        height: 200px;
        background-color: palegreen;
      }

      .item2 {
        width: 300px;
        height: 200px;
        background-color: paleturquoise;
      }

      .item3 {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">111</div>
      <div class="item2">222</div>
      <div class="item3">333</div>
    </div>
  </body>
</html>
